<template>
  <el-breadcrumb :separator-icon="ArrowRight" class="hidden-sm-and-down">
    <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">
      <div
        class="el-breadcrumb__inner is-link"
        :class="{ 'item-no-icon': !item.meta.icon }"
        @click="onBreadcrumbClick(item, index)"
      >
        <span class="breadcrumb-title">{{ item.meta.title }}</span>
      </div>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import defaultConfig from '@/config'
import { useRoute, useRouter } from 'vue-router'
import { ArrowRight } from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/modules/auth'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

const breadcrumbList = computed(() => {
  let breadcrumbData = authStore.breadcrumbListGet[route.matched[route.matched.length - 1].path] ?? []
  // 🙅‍♀️不需要首页面包屑可删除以下判断
  if (breadcrumbData[0].path !== defaultConfig.HOME_URL) {
    breadcrumbData = [{ path: defaultConfig.HOME_URL, meta: { icon: 'HomeFilled', title: '首页' } }, ...breadcrumbData]
  }
  return breadcrumbData
})

// Click Breadcrumb
const onBreadcrumbClick = (item: Menu.MenuOptions, index: number) => {
  if (index !== breadcrumbList.value.length - 1) router.push(item.path)
}
</script>

<style scoped lang="scss">
.el-breadcrumb {
  margin-left: 15px;
}
.el-breadcrumb .el-breadcrumb__inner .icon {
  font-size: 14px;
  margin-right: 5px;
  float: left;
}
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.3s;
}
.breadcrumb-enter-from,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}
.breadcrumb-leave-active {
  position: absolute;
}
</style>
